<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--事件出发  数据双向绑定-->
    <button v-on:click="num++">点我增加</button>  <!--事件绑定-->
    <button v-on:click="decrement">点我减少</button>
    <input type="text" v-model="num"><!--数据绑定 v-model-->

    <!--{{表达式}}-->
    <h2>{{name}} 非常帅</h2>
    {{num}} 位    <!--数据的值-->

    <!--v-text  v-html 区别 -->
    <span>v-text:</span><span v-text="name"></span> <br/>
    <span>v-html:</span><span v-html="name"></span></span> <br/>
    <br/>

    <!--checkbox 双向绑定-->
    <button v-on:click="add">得到名称</button> <br/>
    <input type="checkbox" v-model="language" value="Java" />Java<br/>
    <input type="checkbox" v-model="language" value="PHP" />PHP<br/>
    <input type="checkbox" v-model="language" value="Swift" />Swift<br/>
    <h1>
        你选择了：{{language.join(',')}}     <!-- 数组拼接  以逗号的方式拼接-->
    </h1>
    <!--事件修饰符  .prevent  阻止默认事件出发   -->
    <a href="https://www.baidu.com" v-on:click.prevent="showInfo">点我</a>   <br/>

    <!--在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 `v-on` 在监听键盘事件时添加按键修饰符： -->
    <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
    <span>输入内容，点击回车键</span><br/>
    <input type="text" v-model="va" v-on:keyup.13="submit"> <br/>
    <!-- 同上 -->
    <input type="text" v-model="va" v-on:keyup.enter="submit"><br/>
    <!-- 缩写语法 -->
    <input type="text" v-model="va"  @keyup.enter="submit"><br/>

     <!--v-for 循环  遍历数组  -->
    <ul>
        <li v-for="user  in users">
            {{user.name}}>>{{user.gender}}>>{{user.age}}
        </li>
    </ul>

    数组角标
    <ul>
        <li v-for="(user,index)  in users">
            {{index}}>>{{user.name}}>>{{user.gender}}>>{{user.age}}
        </li>
    </ul>

    <!--遍历对象  value是对象的所有的值-->
    <ul>
        <li v-for="value in user">
            {{value}}
        </li>
    </ul>

    <!--遍历对象   key是对应的属性名 value是对象的所有的值-->
    <ul>
        <li v-for="(value,key) in user">
            {{key}}>>{{value}}
        </li>
    </ul>
   <!-- - 1个参数时，得到的是对象的值
    - 2个参数时，第一个是值，第二个是键
    - 3个参数时，第三个是索引，从0开始-->
    <ul>
        <li v-for="(value,key,index) in user">
            {{index}}>> {{key}}>>{{value}}
        </li>
    </ul>

    <!--组合按钮-->
    <!-- Alt + C(keycode对应67)  同时按会触发事件 -->
    <span>组合键：Alt + C(keycode对应67)  同时按会触发事件</span>
    <input @keyup.alt.67="clear">
    <!-- Ctrl + Click -->
    <div @click.ctrl="doSomething">Ctrl + Click 来触发    Do something</div>

    <!--v-if   show=!show 表示每次取show的反值，这样可以实现显示和隐藏的切换-->
    <button v-on:click="show=!show">点我呀</button>
    <br>
    <h1 v-if="show">
        看到我啦？！
    </h1>
    <h1 v-show="show">
        看到我啦？！
    </h1>


    <!--与v-for结合  当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。-->
    <ul>
        <li v-for="(user, index) in users" v-if="user.gender == '女'">
            {{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
        </li>
    </ul>

           <!--你可以使用 `v-else` 指令来表示 `v-if` 的“else 块”：-->
        <h1 v-if="Math.random() > 0.5">
            看到我啦？！if
        </h1>
        <h1 v-else>
            看到我啦？！else
        </h1>

    <!--`v-else-if`，顾名思义，充当 `v-if` 的“else-if 块”，可以连续使用：-->
    <button v-on:click="random=Math.random()">点我呀</button><span>{{random}}</span>
    <h1 v-if="random >= 0.75">
        看到我啦？！if
    </h1>
    <h1 v-else-if="random > 0.5">
        看到我啦？！if 0.5
    </h1>
    <h1 v-else-if="random > 0.25">
        看到我啦？！if 0.25
    </h1>
    <h1 v-else>
        看到我啦？！else
    </h1>

</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    var app =new Vue({
        el:"#app",
        data:{
            name:"<h1>大家好，我是虎哥</h1>",
            num: 3,
            language:[],
            va:"",
            show: true,
            random: 1,
            users:[
                {name:'柳岩', gender:'女', age: 21},
                {name:'虎哥', gender:'男', age: 30},
                {name:'范冰冰', gender:'女', age: 24},
                {name:'刘亦菲', gender:'女', age: 18},
                {name:'古力娜扎', gender:'女', age: 25}
            ],
            user:{name:'柳岩', gender:'女', age: 21},

        },
        methods:{
            add:function(){
                console.info("名称是"+this.name);
                alert("名称是"+this.name);
            },decrement:function(){
                this.num--;
            },
            showInfo:function(){
              alert("showInfo");
            },submit:function(){
                alert("submit!!!"+this.va);
            },clear:function(){
                alert("alt   +   c   键同时按了");
            },doSomething:function(){
                alert("doSomething");
            },

        }, created(){  //created代表在vue实例创建后；  生命周期函数
            //this.name = "hello, world！ 我出生了！";
            console.info(this);
            console.info(this.num);
        },
    });
</script>
</html>